<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#container {
	height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
	var sContent =
		"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + 
		"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" + 
		"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + 
		"</div>";
		var map = new BMap.Map("container"); // 创建地图实例
		var lat = 30.1536;
		var lng = 120.1124;
		var point = new BMap.Point(lng, lat); // 创建点坐标
		map.centerAndZoom(point, 11); // 初始化地图，设置中心点坐标和地图级别
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.OverviewMapControl());
		map.addControl(new BMap.MapTypeControl());
		map.enableScrollWheelZoom();
		var marker = new BMap.Marker(point); // 创建标注  
		map.addOverlay(marker);
		var opts = {
			width : 250, // 信息窗口宽度  
			height : 100, // 信息窗口高度  
			title : "Hello" // 信息窗口标题  
		};
		var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象  
		marker.addEventListener("click", function() {
			this.openInfoWindow(infoWindow);
			//图片加载完毕重绘infowindow
			document.getElementById('imgDemo').onload = function() {
				infoWindow.redraw();
			};
		});
	</script>
</body>
</html>